<template>
    <div class="app-container">
        <div class="search-container">
            <el-form ref="queryParamsRef" :inline="true" :model="queryParams" label-width="100px">
                <el-form-item label="途径名称" prop="administrationLabel">
                    <el-input
                        v-model="queryParams.administrationLabel"
                        clearable
                        placeholder="请输入途径名称"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="执行单类型名称" prop="classifyName">
                    <el-input
                        v-model="queryParams.classifyName"
                        clearable
                        placeholder="请输入执行单类型名称"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <query-form-button @handleQuery="handleQuery" @resetQuery="resetQuery"/>
                </el-form-item>
            </el-form>
        </div>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    v-hasPerm="['business:ordersWayClassify:add']"
                    plain
                    type="primary"
                    @click="handleAdd"
                >
                    <template
                        #icon>
                        <i-ep-plus/>
                    </template>
                    新增
                </el-button>
            </el-col>
        </el-row>

        <el-table v-adaptive :border="true" :data="ordersWayClassifyList" :header-cell-style="$headerCellStyle"
                  :stripe="true" highlight-current-row>
            <el-table-column :align="'center'" label="途径名称" prop="administrationLabel"/>
            <el-table-column :align="'center'" label="执行单类型名称" prop="classifyName"/>
            <el-table-column :align="'center'" label="备注信息" prop="remarks"/>
            <el-table-column :align="'center'" label="创建人姓名" prop="createByName"/>
            <el-table-column :align="'center'" class-name="small-padding fixed-width" label="操作" width="220">
                <template #default="scope">
                    <el-button
                        v-hasPerm="['business:ordersWayClassify:edit']"
                        type="success"
                        @click="handleUpdate(scope.row)"
                    >
                        <template #icon>
                            <i-ep-edit/>
                        </template>
                        修改
                    </el-button>
                    <el-button
                        v-hasPerm="['business:ordersWayClassify:remove']"
                        type="danger"
                        @click="handleDelete(scope.row)"
                    >
                        <template #icon>
                            <i-ep-delete/>
                        </template>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total>0"
            v-model:limit="queryParams.pageSize"
            v-model:page="queryParams.pageNum"
            :total="total"
            @pagination="getList"
        />

        <!-- 添加或修改医嘱执行单与途径对照对话框 -->
        <el-dialog v-model="open" :close-on-click-modal="false" :title="title" append-to-body width="500px">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="途径" prop="administrationValue">
                    <administration-index
                        :placeholder="'请选择途径'" :value="form.administrationValue"
                        style="width: 100%"
                        @administrationInfoChange="administrationInfoChange"/>
                </el-form-item>
                <el-form-item label="执行单类型" prop="classifyType">
                    <el-select v-model="form.classifyValue" placeholder="请选择执行单类型"
                               @change="classifyValueChange">
                        <el-option
                            v-for="dict in dictDataMap['orders_way_classify']"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                        ></el-option>
                    </el-select>
                </el-form-item>
              <el-form-item label="备注信息" prop="remarks">
                <el-input v-model="form.remarks" placeholder="请输入备注信息" />
              </el-form-item>
            </el-form>
            <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
export default {
    name: "OrdersWayClassify"
}
</script>

<script lang="ts" setup>
import {
    addOrdersWayClassify,
    delOrdersWayClassify,
    getOrdersWayClassify,
    selectPageOrdersWayClassify,
    updateOrdersWayClassify
} from "@/api/orders/ordersWayClassify.ts";

import {useDictStoreHook} from "@/store/modules/dict";
import {useUserStoreHook} from "@/store/modules/user.ts";

const useUserStore = useUserStoreHook();
const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData('orders_way_classify'))


const {proxy} = getCurrentInstance() as any;

// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo;
const formRef = ref();
const queryParamsRef = ref()
const ordersWayClassifyList = ref([]);
const open = ref(false);
const total = ref(0);
const title = ref("");


const form = ref<any>({
    administrationValue: "",
    administrationLabel: "",
    classifyType: "orders_way_classify",
    classifyValue: "",
    classifyName: "",
    administrationId: "",
    orgId: userInfo.orgId,
    remarks: "",
    updateByName: "",
    createByName: ""
})
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    administrationValue: "",
    classifyType: "orders_way_classify",
    classifyValue: "",
    orgId: userInfo.orgId
})
const rules = ref({
    administrationValue: [
        {
            required: true, message: "编码不能为空", trigger: "change"
        }
    ],
    classifyValue: [
        {
            required: true, message: "执行单类型不能为空", trigger: "change"
        }
    ]
})

/** 查询医嘱执行单与途径对照列表 */
function getList() {
    selectPageOrdersWayClassify(queryParams.value).then((response: any) => {
        ordersWayClassifyList.value = response.rows;
        total.value = response.total;
    });
}

// 取消按钮
function cancel() {
    open.value = false;
    reset();
}

// 途径点击事件
function administrationInfoChange(administrationInfo: any) {
    form.value.administrationValue = administrationInfo.dictValue;
    form.value.administrationType = administrationInfo.dictType;
    form.value.administrationId = administrationInfo.orgDictId;
    form.value.administrationLabel = administrationInfo.dictLabel;
}

// 执行单字典点击事件
function classifyValueChange(value: any) {
    const classifyTypeInfo = dictDataMap.value['orders_way_classify']
    const index = classifyTypeInfo.findIndex((item: any) => {
        return value === item.dictValue
    })
    if (index >-1) {
        form.value.classifyType = "orders_way_classify";
        form.value.classifyValue = classifyTypeInfo[index].dictValue;
        form.value.classifyName = classifyTypeInfo[index].dictLabel;
    }
}

// 表单重置
function reset() {
    form.value = {
        administrationValue: "",
        administrationLabel: "",
        classifyType: "orders_way_classify",
        classifyValue: "",
        classifyName: "",
        administrationId: "",
        orgId: queryParams.value.orgId
    }
    nextTick(() => {
        formRef.value.resetFields()
    })
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    queryParamsRef.value.resetFields()
    // proxy.resetForm("queryRef");
    handleQuery();
}

/** 新增按钮操作 */
function handleAdd() {
    if (!queryParams.value.orgId) {
        return ElMessage.error("请先选择机构")
    }
    open.value = true;
    reset();
    title.value = "添加医嘱执行单与途径对照";
}

/** 修改按钮操作 */
function handleUpdate(row) {
    open.value = true;
    reset();
    const _ordersWayClassifyId = row.ordersWayClassifyId
    getOrdersWayClassify(_ordersWayClassifyId).then((response: any) => {
        form.value = response.data;
        title.value = "修改医嘱执行单与途径对照";
    });
}

/** 提交按钮 */
function submitForm() {
    (formRef.value as any).validate(valid => {
        if (valid) {
            if (form.value.ordersWayClassifyId != null) {
                updateOrdersWayClassify(form.value).then((response: any) => {
                    ElMessage.success("修改成功");
                    open.value = false;
                    getList();
                }).finally(() => {
                });
            } else {
                addOrdersWayClassify(form.value).then((response: any) => {
                    ElMessage.success("新增成功");
                    open.value = false;
                    getList();
                }).finally(() => {
                });
            }
        }
    });
}

/** 删除按钮操作 */
function handleDelete(row) {
    const _ordersWayClassifyIds = row.ordersWayClassifyId ||
        ids.value;
    ElMessageBox.confirm('是否确认删除医嘱执行单与途径数据？',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        delOrdersWayClassify(_ordersWayClassifyIds).then(() => {
            getList();
            ElMessage.success("删除成功");
        })
    }).catch(() => {
    })
}


/** 导出按钮操作 */
function handleExport() {
    proxy.download('business/ordersWayClassify/export', {
        ...queryParams.value
    }, `ordersWayClassify_${new Date().getTime()}.xlsx`)
}

getList();
</script>
